<template>
  <div class="mcn-details-container">
    <!-- 显示MCN名称 -->
    <el-card class="mc-card" :body-style="{ padding: '20px' }">
      <h2>MCN名称: {{ mcnName }}</h2>
    </el-card>

    <!-- ECharts 饼图 -->
    <div class="chart-container">
      <div ref="pieChart" class="chart"></div>
    </div>

    <!-- 聊天室 -->
    <el-card class="chat-card" :body-style="{ padding: '10px' }">
      <h3>聊天室</h3>
      <div class="chat-box">
        <div class="chat-messages" ref="chatMessages">
          <!-- 聊天消息 -->
          <div v-for="msg in chatMessages" :key="msg.id" class="message">
            <strong>{{ msg.sender }}:</strong> {{ msg.text }}
          </div>
        </div>
        <el-input
          v-model="newMessage"
          placeholder="输入消息..."
          @keyup.enter.native="sendMessage"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      mcnName: '',
      chatMessages: [
        { id: 1, sender: 'Alice', text: 'Hello!' },
        { id: 2, sender: 'Bob', text: 'Hi there!' }
      ],
      newMessage: '',
      currentUser: 'You'
    };
  },
  mounted() {
    // 从 URL 获取MCN名称
    this.mcnName = new URLSearchParams(window.location.search).get('name') || 'Unknown';

    // 初始化 ECharts 饼图
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.pieChart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: 'MCN 播放量分布',
          subtext: '示例数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '播放量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 335, name: '视频1' },
              { value: 310, name: '视频2' },
              { value: 234, name: '视频3' },
              { value: 135, name: '视频4' },
              { value: 1548, name: '视频5' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              formatter: '{b}: {d}%'
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    sendMessage() {
      if (this.newMessage.trim() !== '') {
        this.chatMessages.push({
          id: Date.now(),
          sender: this.currentUser,
          text: this.newMessage
        });
        this.newMessage = '';
        // Scroll to the bottom of the chat messages
        this.$nextTick(() => {
          const chatMessages = this.$refs.chatMessages;
          chatMessages.scrollTop = chatMessages.scrollHeight;
        });
      }
    }
  }
};
</script>

<style scoped>
.mcn-details-container {
  padding: 20px;
}

.mc-card {
  margin-bottom: 20px;
}

.chart-container {
  margin-bottom: 20px;
  height: 400px;
}

.chart {
  height: 100%;
}

.chat-card {
  max-width: 600px;
  margin-top: 20px;
}

.chat-box {
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  height: 300px;
  border: 1px solid #ddd;
  padding: 10px;
}

.message {
  margin-bottom: 10px;
}

.el-input {
  margin-top: 10px;
}
</style>
